<template>
  <div>
    <!-- 分支测试 -->
    <!-- master -->
    <el-form ref="roleForm" :disabled="formDis" :model="roleForm" :rules="rules" label-width="100px" class="demo-ruleForm" style="margin-top: 20px;">
      <el-form-item label="角色名称" prop="name">
        <el-col :span="6" >
          <el-input v-model="roleForm.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-col :span="6" >
          <el-input v-model="roleForm.remark" type="textarea" maxlength="500" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('roleForm')">确定</el-button>
        <el-button v-preventReClick v-if="!formDis" :disabled="false" @click="$router.go(-1)">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { addRole, editRole } from '@/api/sysRole'
export default {
  data() {
    return {
      roleForm: {
        name: '',
        remark: ''
      },
      formDis: false,
      rules: {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
          { max: 50, message: '最多50个字符', trigger: 'blur' }
        ],
        remark: [
          { max: 500, message: '最多500个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    console.log('this.$route.query:', this.$route.query)
    const _self = this;
    if (this.$route.query && JSON.stringify(this.$route.query) !== '{}') {
      this.isEdit = this.$route.query.hasOwnProperty('isEdit') ? Boolean(_self.$route.query.isEdit) : false;
      this.formDis = Boolean(this.$route.query.isLook)
      const a = this.$route.query
      console.log('新增编辑角色：：：', a)
      if (a.hasOwnProperty('isLook')) {
        delete a.isLook;
      }
      if (a.hasOwnProperty('isEdit')) {
        delete a.password;
        delete a.isEdit;
      }
      // console.log(typeof this.sysUserForm.status)
      // this.sysUserForm.status = Number(this.sysUserForm.status)
      this.roleForm = a
    } else {
      // this.resetForm('roleForm')
    }
    this.selectShow = true
  },
  methods: {
    request(data) {
    //   data.startDate = new Date(data.startDate).getTime();
    //   data.endDate = new Date(data.endDate).getTime();
      if (this.isEdit) {
        // 编辑
        if (data.newPassword && data.newPassword.length > 0) {
          data.password = data.newPassword
        }
        editRole(data).then(response => {
          if (Number(response.code) === 200) {
            Message.success('编辑成功')
            this.$router.go(-1);
          } else {
            Message.error(response.message + '-' + response.data)
          }
        })
      } else {
        // 新增
        console.log(data)
        addRole(data).then(response => {
          if (Number(response.code) === 200) {
            Message.success('新增成功')
            this.$router.go(-1);
          } else {
            Message.error(response.message + '-' + response.data)
          }
        });
      }
    },
    submitForm(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.request(this.roleForm)
        //   addRole(this.roleForm).then(res => {
        //     if (res.code === '200') {
        //       Message.success('新增成功')
        //     }
        //     console.log(res)
        //   })
        }
      })
    }
    // renderContent(h, { node, data, store }) {
    //   console.log(data)
    //   return (
    //     <div style='text-align:right;flex: 1;width:400px;display:flex;justify-content:space-between;'>
    //       <span>
    //         <span>{node.label}</span>
    //       </span>
    //       <div v-if='node.data.id == 1'>
    //         <el-checkbox>备选项</el-checkbox><span>123</span>
    //       </div>
    //     </div>
    //   );
    // }
  }
};
</script>

<style lang="scss">
/deep/ .el-tree-node{
  display: block;
}

.el-tree-node div:nth-of-type(2) .el-tree-node__content:nth-of-type(1) {
  width: 150px;
  background: yellow;
}

.el-tree-node div:nth-of-type(2) .el-tree-node__content:nth-of-type(1)>div{
  background: blue;
}

.el-tree-node div:nth-of-type(2) .el-tree-node__children{
  /*background: red;*/
  padding-left:0;
}

.el-tree-node div:nth-of-type(2) .el-tree-node__children>div{
  width: 110px;
}

.el-tree-node div:nth-of-type(2) .el-tree-node__children>div .el-tree-node__content{
  /*padding-left: 0 !important;*/
}

.el-tree-node__expand-icon{
  display: -none;
}
</style>
